<template>
  <div>
    <div class="top-1">
      <van-row>
        <van-col span="24">
          <van-image
            style="float: left; margin-bottom: 60px"
            round
            fit="cover"
            alt="头像"
            width="100px"
            height="100px"
            :src="imgUrls + '/file/' + getUserInfo.avatar"
          >
            <template v-slot:error>{{ getUserInfo.username }}</template>
          </van-image>
          <span class="tit">
            <font size="4" v-if="getUserInfo">{{ getUserInfo.nickname }}</font>
            <font size="4" v-else>登录/注册</font>
          </span>
        </van-col>
        <div class="tab">
          <div>
            <span>
              <font color="#ee436a" size="4">{{ getUserInfo.lend }}</font> </span
            ><br />
            <span>
              <font color="#F8F6FC">借阅次数</font>
            </span>
          </div>
          <div>
            <span>
              <font color="#ee436a" size="4">{{ getUserInfo.borrow }}</font> </span
            ><br />
            <span>
              <font color="#F8F6FC">归还次数</font>
            </span>
          </div>
          <div>
            <span>
              <font color="#ee436a" size="4">{{ getUserInfo.collection }}</font> </span
            ><br />
            <span>
              <font color="#F8F6FC">收藏数</font>
            </span>
          </div>
          <div>
            <span>
              <font color="#ee436a" size="4">{{ getUserInfo.expire }}</font> </span
            ><br />
            <span>
              <font color="#F8F6FC">逾期数</font>
            </span>
          </div>
        </div>
      </van-row>
    </div>
    <div class="grid">
      <van-grid :column-num="4" square :border="false">
        <van-grid-item to="/orderType?type=3">
          <van-icon name="shop-o" size="30" />
          <span>全部</span>
        </van-grid-item>
        <van-grid-item to="/orderType?type=0">
          <van-icon name="calendar-o" size="30" />
          <span>未归还</span>
        </van-grid-item>
        <van-grid-item to="/orderType?type=2">
          <van-icon name="volume-o" size="30" />
          <span>已逾期</span>
        </van-grid-item>
        <van-grid-item to="/orderType?type=1">
          <van-icon name="share-o" size="30" />
          <span>已归还</span>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="info">
      <!--			<van-cell is-link title="地址管理" icon="location" to="/contactList" />-->
      <van-cell is-link title="我的收藏" icon="goods-collect" to="/collect?type=collect" />
<!--      <van-cell is-link title="留言" icon="chat-o" to="/wallet" />-->
      <van-cell is-link title="修改密码" icon="setting" to="/rpwd" />
      <van-button block type="danger" style="margin-top: 15px" @click="logout">退出登录</van-button>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import { getUserInfo, loginOut } from '@/api/login.js'

export default {
  data() {
    return {
      nickname: 'guest',
      avatar: 'default_avatar.png',
      getUserInfo: {
        lend: 0,
        borrow: 0,
        collection: 0,
        expire: 0
      },
      imgUrls: this.$baseApi
    }
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      getUserInfo().then(res => {
        console.log(res)
        this.getUserInfo = res.data
      })
    },
    logout() {
      loginOut().then(res => {
        this.$router.push('/login')
        Cookies.set('Token', '', -1)
        sessionStorage.clear()
      })
    }
  }
}
</script>

<style scoped>
.top-1 {
  background-image: url(../../../static/userBg.png);
  padding: 15px;
  border-bottom-right-radius: 16%;
  border-bottom-left-radius: 16%;
  position: relative;
}

.tit {
  color: #e4e7ed;
  display: block;
  height: 100%;
  float: left;
  line-height: 100px;
  margin-left: 20px;
}

.tab {
  position: absolute;
  background-color: #4399fc;
  height: 60px;
  width: calc(100% - 30px);
  line-height: 23px;
  border-radius: 5px;
  background-color: #3e171f;
  bottom: 0px;
}

.tab div {
  text-align: center;
  margin-top: 8px;
  width: 25%;
  float: left;
}

.grid {
  width: calc(100% - 30px);
  background-color: #ffffff;
  margin: 15px auto;
}

.info {
  width: calc(100% - 30px);
  margin: 0 auto;
}

.info /deep/ .van-icon-gold-coin {
  color: #e07472;
}

.info /deep/ .van-icon-location {
  color: #5fcda2;
}

.info /deep/ .van-icon-gem {
  color: #9789f7;
}

.info /deep/ .van-icon-coupon {
  color: #ee883b;
}

.info /deep/ .van-icon-goods-collect {
  color: #54b4ef;
}

.info /deep/ .van-icon-setting {
  color: #e07472;
}

.info /deep/ .van-icon-paid {
  color: #f8807e;
}

.info /deep/ .van-icon-underway {
  color: #f8807e;
}
</style>
